<template>
  <view class="container">
    <view class="left-bottom-sign"></view>
    <view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
    <view class="right-top-sign"></view>
    <!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
    <view class="wrapper">
      <view class="left-top-sign">REGISTER</view>
      <view class="welcome"> 欢迎注册！ </view>
      <view class="content">
        <view class="top">
          <view class="cell">
            <view class="name">账号</view>
            <view class="input-box">
              <input
                type="text"
                v-model="username"
                placeholder="请输入账号"
                class="ipt"
                placeholder-class="hold"
              />
            </view>
          </view>
          <view class="cell">
            <view class="name">真实姓名</view>
            <view class="input-box">
              <input
                type="text"
                v-model="realName"
                placeholder="请输入真实姓名"
                class="ipt"
                placeholder-class="hold"
              />
            </view>
          </view>
          <view class="cell">
            <view class="name">手机号</view>
            <view class="input-box">
              <input
                type="text"
                v-model="phone"
                placeholder="请输入手机号"
                class="ipt"
                placeholder-class="hold"
              />
            </view>
          </view>
          <!-- <smh-verification-code :unit="4" :focus="true" :ontime="true" @change="handle"></smh-verification-code> -->
          <view class="cell">
            <view class="name">验证码</view>
            <view class="inn">
              <input
                type="number"
                maxlength="6"
                v-model="code"
                placeholder="请输入验证码"
                placeholder-class="pla"
              />
              <button size="mini" @click="getcode()" v-if="authCode">
                获取验证码
              </button>
              <button size="mini" v-if="!authCode">{{ authTime }}S</button>
            </view>
          </view>
          <view class="cell">
            <view class="name">密码</view>
            <view class="input-box">
              <input
                type="password"
                v-model="password"
                placeholder="请输入密码"
                class="ipt"
                placeholder-class="hold"
              />
            </view>
          </view>
          <view class="cell">
            <view class="name">确认密码</view>
            <view class="input-box">
              <input
                type="password"
                v-model="password2"
                placeholder="请输入确认密码"
                class="ipt"
                placeholder-class="hold"
              />
            </view>
          </view>
          <view class="cell">
            <view class="name">邀请码(选填)</view>
            <view class="input-box">
              <input
                type="text"
                v-model="invitedCode"
                placeholder="请填写邀请码"
                class="ipt"
                placeholder-class="hold"
              />
            </view>
          </view>

          <button class="submit" @click="submit" :disabled="disabled">
            注册
          </button>
          <navigator
            url="/pages/login/login-account"
            hover-class="none"
            class="change"
            >立即登录 ></navigator
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { isMobile, isPassword } from "../../utils/validate";
export default {
  data() {
    return {
      username: "",
      realName: "",
      phone: "",
      invitedCode: "",
      disabled: false,
      password: "",
      password2: "",
      code: "",
      logining: false,

      // 倒计时计数器
      authTime: 0,
      // 重新发送
      btnShow: true,
      // 显示‘获取按钮’还是‘倒计时’
      authCode: true,
    };
  },
  onLoad() {},
  methods: {
    submit() {
      console.log("submit 用户注册");
      if (!isMobile(this.phone)) {
        this.$u.func.showToast({
          title: "手机号不正确",
        });
        return;
      }
      if (!isPassword(this.password)) {
        this.$u.func.showToast({
          title: "密码格式不正确",
        });
        return;
      }
      if (this.password != this.password2) {
        this.$u.func.showToast({
          title: "两次密码不一致",
        });
        return;
      }

      this.logining = true;
      let data = {
        username: this.username,
        realName: this.realName,
        phone: this.phone,
        password: this.password,
        password2: this.password2,
        code: this.code,
        invitedCode: this.invitedCode,
      };
      console.log('data', data)
      this.$u.api
        .register(data)
        .then((res) => {
          console.log("register", res);
          this.$u.func.showToast({
            title: "注册成功",
          });
          uni.navigateTo({
            url: "/pages/login/login-account",
          });
        })
        .catch((error) => {
          this.logining = false;
        });
    },
    // 验证码
    getcode() {
      let _this = this;
      // console.log('phone', this.phone)
      // return
      if (!_this.phone) {
        uni.showToast({
          icon: "none",
          title: "请输入手机号",
        });
        return false;
      }
      _this.authTime = 120;
      _this.authCode = false;

      console.log("调用验证码接口");
      this.$u.api
        .sms(_this.phone).then(res => {
          console.log('send sms', res)
        })

      // 倒计时计数器
      var sendTimer = setInterval(() => {
        _this.authTime--;
        if (_this.authTime <= 0) {
          _this.authCode = true;
          clearInterval(sendTimer);
        }
      }, 1000);
    },
  },
};
</script>

<style lang='scss' scoped>
page {
  background: #fff;
}

.container {
  padding-top: 65px;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  background: #fff;
}

.wrapper {
  position: relative;
  z-index: 90;
  background: #fff;
  padding-bottom: 40upx;
}

.back-btn {
  position: absolute;
  left: 40upx;
  z-index: 9999;
  padding-top: var(--status-bar-height);
  top: 40upx;
  font-size: 40upx;
  color: $font-color-dark;
}

.left-top-sign {
  font-size: 120upx;
  color: $page-color-base;
  position: relative;
  left: -16upx;
}

.right-top-sign {
  position: absolute;
  top: 80upx;
  right: -30upx;
  z-index: 95;

  &:before,
  &:after {
    display: block;
    content: "";
    width: 400upx;
    height: 80upx;
    background: #b4f3e2;
  }

  &:before {
    transform: rotate(50deg);
    border-radius: 0 50px 0 0;
  }

  &:after {
    position: absolute;
    right: -198upx;
    top: 0;
    transform: rotate(-50deg);
    border-radius: 50px 0 0 0;
    /* background: pink; */
  }
}

.left-bottom-sign {
  position: absolute;
  left: -270upx;
  bottom: -320upx;
  border: 100upx solid #d0d1fd;
  border-radius: 50%;
  padding: 180upx;
}

.welcome {
  position: relative;
  left: 50upx;
  top: -90upx;
  font-size: 46upx;
  color: #555;
  text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  height: auto;
  width: 100%;

  .top {
    width: 100%;
  }

  .logo {
    display: block;
    width: 281rpx;
    height: auto;
    margin: 0 auto 120rpx;
  }

  .cell {
    width: 100%;
    padding: 0 85rpx;
    box-sizing: border-box;
    margin-top: 36rpx;

    .name {
      font-size: 22rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #3e4a59;
      line-height: 30rpx;
      opacity: 0.72;
    }

    .input-box {
      padding: 30rpx 0;
      border-bottom: 2rpx solid #f6f6f6;
      display: flex;
      align-items: center;

      .code {
        font-size: 22rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #0d0d0d;
        line-height: 30rpx;

        text {
          color: #14b9c8;
        }
      }

      .ipt {
        flex: 1;
        // height: 24rpx;
        font-size: 24rpx;
      }

      .hold {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #3e4a59;
        line-height: 30px;
        opacity: 0.45;
      }
    }
  }

  .agree {
    margin: 27rpx 95rpx 0;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #cacaca;
    line-height: 34rpx;

    .a {
      color: #000000;
    }
  }

  .submit {
    margin: 60rpx 90rpx 0;
    border: none;
    width: 572rpx;
    height: 86rpx;
    line-height: 86rpx;
    box-sizing: border-box;
    border-radius: 15rpx;
    background-color: #14b9c8;
    color: #ffffff;

    &::after {
      content: none;
    }

    &::before {
      content: none;
    }

    &[disabled="true"] {
      background: #e4e4e4;
      font-size: 36rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
    }
  }

  .tip {
    margin-top: 30rpx;
    text-align: center;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #cacaca;
    line-height: 34rpx;
  }

  .change {
    margin-top: 20rpx;
    text-align: center;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #14b9c8;
    line-height: 34rpx;
  }

  .tag {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #9f9f9f;
    line-height: 34rpx;

    &::before {
      content: "";
      display: block;
      width: 160rpx;
      height: 1px;
      background: #d8d8d8;
      opacity: 0.86;
    }

    &::after {
      content: "";
      display: block;
      width: 160rpx;
      height: 1px;
      background: #d8d8d8;
      opacity: 0.86;
    }
  }

  .chat-arr {
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .icon {
      width: 73rpx;
      height: 73rpx;
    }
  }
}

/* 获取验证码 */
.cell .inn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  input {
    width: 40%;
  }
  button {
    margin: 0;
    min-width: 120upx;
    max-width: 60%;
    height: 64upx;
    line-height: 64upx;
    padding: 0 20upx;
    color: #3c70ff;
    box-sizing: border-box;
    border: 2upx solid #3c70ff;
    border-radius: 32upx;
    font-size: 30upx;
  }
  button::after {
    display: none;
  }
}
</style>
